<template>
    <!-- 室内外消火栓 -->
    <div class="in-outdoor-fire-hydrants-wrap">
        <div class="card-title">
            <span class="card-title-text" @click="jumpDeviceDetail">室内外消火栓</span>
        </div>
        <div class="in-outdoor-fire-hydrants-content">
            <!-- 图 -->
            <div class="fire-hydrants-paint">
                <div class="animated-ring"></div>
            </div>
            <!-- 内容 -->
            <div class="fire-hydrants-state-list">
                <div class="fire-hydrants-item">
                    <p class="item-title">报警消火栓</p>
                    <div class="item-value police-state">{{ fireAlarmCount }}</div>
                </div>
                <div class="fire-hydrants-item">
                    <p class="item-title">故障消火栓</p>
                    <div class="item-value malfunction-state">{{ faultAlarmCount }}</div>
                </div>
                <div class="fire-hydrants-item">
                    <p class="item-title">正常消火栓</p>
                    <div class="item-value normal-state">{{ normalCount }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getFcfRealTimeStatusMultiCount } from '@/api/sysMonitor'

export default {
    name: 'CardInOrOutdoorFireHydrants',
    props: {
        orgId: {
            default() {
                return false
            }
        }
    },
    data() {
        return {
            fireAlarmCount: 0,
            faultAlarmCount: 0,
            normalCount: 0
        }
    },
    created() {
        this.getFireHydrantsData()
    },
    methods: {
        getFireHydrantsData() {
            let parames = {
                orgIds: this.orgId || this.$store.state.userInfo.organizationIds,
                fcfsType: 6
            }
            getFcfRealTimeStatusMultiCount(parames).then(res => {
                if(res.status === 200) {
                    this.fireAlarmCount = res.data.fireAlarmCount
                    this.faultAlarmCount = res.data.faultAlarmCount
                    this.normalCount = res.data.normalCount
                }
            })
        },
        jumpDeviceDetail() {
            let that = this
            that.$Ctl.enterDetail('EquipmentList', {
                orgId: that.orgId || that.$store.state.userInfo.organizationIds, // 联网单位Id
                systemId: 11
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.in-outdoor-fire-hydrants-wrap {
    height: 100%;
    width: 100%;
    .in-outdoor-fire-hydrants-content {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        height: calc(100% - 32px);
        .fire-hydrants-paint {
            position: relative;
            width: 50%;
            height: 100%;
            background: url(../../assets/images/cards/in-outdoor-fire-hydrants.png) center center no-repeat;
            background-size: contain;
            .animated-ring {
                position: absolute;
                top: 0;
                left: 5%;
                width: 90%;
                height: 100%;
                background: url(../../assets/images/cards/animated-ring.png) center center no-repeat;
                background-size: contain;
                animation: scaning 5s linear infinite;
            }
        }
        .fire-hydrants-state-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 10px;
            width: 50%;
            height: 100%;
            .fire-hydrants-item {
                display: flex;
                margin-top: 10px;
                height: 40px;
                line-height: 40px;
                .item-title {
                    color: #A3BEDD;
                    font-size: 18px;
                }
                .item-value {
                    margin-left: 20px;
                    padding-left: 20px;
                    width: 90px;
                    font-size: 20px;
                }
                .police-state {
                    background-color: rgba(176,55,79,.2);
                    color: #B0374F;
                }
                .malfunction-state {
                    background-color: rgba(210,146,71,.2);
                    color: #D29247;
                }
                .normal-state {
                    background-color: rgba(11,177,168,.2);
                    color: #0BB1A8;
                }
            }
        }
    }
}
</style>